<template>
  <view class="login">
    <input type="text" name="phone" class="phone" placeholder="请输入电话号码" v-model.trim="phone"/>
    <view class="verifybox">
      <input type="text" placeholder="输入验证码" v-model.trim="veritycode"/>
      <image :src="imgurl" class="codeimg" @click="updatevertrycode"></image>
    </view>
    <button class="btnlogin" @click="btnlogin">登录</button>
  </view>
</template>

<script>
  import {loadingSvg} from '@/utils/svgtobase.js'
  import {regphone} from '@/utils/verityphone.js'
  import {baseUrl} from '@/common/config.js'
  export default {
    data() {
      return {
        imgurl:'',
        phone:"",
        veritycode:'',
      }
    },
    methods: {
      // 登录处理
      btnlogin(){
        if(!this.phone.length){
         return   uni.showToast({
            title:"手机号不能为空",
            icon:"error"
          })
        }
        if(!regphone(this.phone)){
         return uni.showToast({
            title:"手机号码不合法",
            icon:"error"
          })
          this.phone = ''
        }
        if(!this.veritycode.length){
         return uni.showToast({
            title:"验证码不能为空",
            icon:"error"
          })
        }
        // 发起登录请求
        uni.request({
          url:baseUrl+"/login",
          method:"POST",
          data:{veritycode:this.veritycode,phone:this.phone,code:uni.getStorageSync("code")},
          success:(res)=>{
            console.log(res)
            if(res.data.status){
              uni.showToast({
                icon:"error",
                title:res.data.message
              })
            }else{
              uni.showToast({
                title:res.data.message
              })
              uni.switchTab({
              	url: '/pages/index/index'
              });
            }
          }
        })
      },
      // 更新验证码
      updatevertrycode(){
        this.getverify()
      },
      // 获取验证码
      getverify(){
        uni.request({
          url:baseUrl+'/verify',
          success:(res)=> {
            this.imgurl = loadingSvg(res.data.data)
            uni.setStorage({
            	key: 'code',
            	data: res.data.code,
            });
          },
        })
      }
    },
    onLoad() {
     this.getverify()
    }
  }
</script>

<style scoped>
.login{
  padding: 40px;
  margin-top: 200px;
  }
  .login input {
    border: 1px solid rgba(0, 0, 0,.3);
    padding: 10px 6px;
  }
.phone{
    line-height: 30px;
    margin-bottom: 20px;
  }
  .verifybox{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }  
  .verifybox input{
      flex: 1;
    }
.codeimg{
      margin-left: 20px;
      width: 100px;
      height: 44px;
}
.btnlogin{
  margin-top: 20px;
}
</style>
